<template>
  <div class="layout-all" style="width: 30%;">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="标题:" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="模块名:" prop="module_title">
        <el-input v-model="form.module_title" placeholder="请输入模块名" />
      </el-form-item>
      <el-form-item label="对应模型:" prop="model_arr">
        <el-select
          v-model="form.model"
          @change="changeModel"
          placeholder="请选择对应模型"
        >
          <el-option
            v-for="item in model_arr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="item.label + ':'"
        v-for="(item, index) in model_binding"
        :key="index"
        prop="binding"
      >
        <el-input v-model="binding[index].value" placeholder="值" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-close" circle @click="bk()" />
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="onSubmit('form')"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      is_show: false,
      id: 0,
      model_arr: [],
      binding_arr: {},
      model_binding: [],
      binding: [[{ id: "", label: "", value: "" }]],
      thumb: "",
      form: {},
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        module_title: [
          { required: true, message: "请选择模块名", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    this.init_into();
  },
  methods: {
    changeModel(val) {
      const bind = this.binding_arr;
      const bind_two = bind[val];
      this.model_binding = bind_two;
      console.log(this.model_binding);
      this.binding = bind_two;
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      console.log(form);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.binding = this.binding;
          console.log(this.form);
          this.get("/admin/ModuleType/save", form, "POST").then((e) => {});
          this.$router.back();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$router.back();
    },
    // 获取当前数据
    init_into() {
      this.get("/admin/ModuleType/info?id=" + this.id, "POST").then((e) => {
        this.form = e.info.tpl;
        this.model_arr = e.model_arr;
        this.binding_arr = e.model_binding_arr;
        if (this.id > 0) {
          this.model_binding = this.binding_arr[this.form.model];
          this.binding = this.form.binding;
          if (this.binding.length === 0 ) {
            this.binding = this.model_binding;
          }
        }
        console.log(this.form);
      });
    },
  },
};
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
